<!-- data.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.plot.ly/plotly-latest.min.css" rel="stylesheet">
    <style>
        .card {
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .chart-container {
            height: 500px;
            margin: 15px 0;
        }
        .tab-content {
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
        }
        .table-actions {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container-fluid p-4">
        <!-- 导航栏 -->
        <nav class="navbar bg-light mb-4">
            <div class="container-fluid d-flex justify-content-between align-items-center">
                <h2 class="h4 mb-0">数据管理系统</h2>
                <div>
                    <button class="btn btn-primary" onclick="exportToCSV()">导出数据</button>
                    <button class="btn btn-outline-secondary ms-2" onclick="toggleCharts()">切换图表</button>
                </div>
            </div>
        </nav>

        <!-- 主体内容 -->
        <div class="row">
            <!-- 表格区 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="h5 mb-0">数据列表</h3>
                        <button class="btn btn-success btn-sm" onclick="addNewRow()">新增</button>
                    </div>
                    <div class="card-body p-0">
                        <table id="dataTable" class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>分类</th>
                                    <th>得分1</th>
                                    <th>得分2</th>
                                    <th>得分3</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 图表区 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="h5 mb-0">数据可视化</h3>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="show3D">
                            <label class="form-check-label" for="show3D">3D模式</label>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-line">
                                <div id="lineChart" class="chart-container"></div>
                            </div>
                            <div class="tab-pane" id="tab-pie">
                                <div id="pieChart" class="chart-container"></div>
                            </div>
                            <div class="tab-pane" id="tab-3d">
                                <div id="3dChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑数据</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="editId">
                        <div class="mb-3">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" id="editName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">年龄</label>
                            <input type="number" class="form-control" id="editAge" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">分类</label>
                            <select class="form-select" id="editCategory" required>
                                <option value="产品设计">产品设计</option>
                                <option value="前端开发">前端开发</option>
                                <option value="数据分析">数据分析</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">得分1</label>
                            <input type="number" class="form-control" id="editScore1" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">得分2</label>
                            <input type="number" class="form-control" id="editScore2" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">得分3</label>
                            <input type="number" class="form-control" id="editScore3" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveEdit()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
        // 初始化数据（已修复JSON格式）
        let data = JSON.parse(localStorage.getItem('data')) || [
            {id: 1, name: 'Alice', age: 22, category: '产品设计', score1: 78, score2: 85, score3: 92},
            {id: 2, name: 'Bob', age: 24, category: '前端开发', score1: 88, score2: 76, score3: 81},
            {id: 3, name: 'Charlie', age: 23, category: '数据分析', score1: 90, score2: 89, score3: 87},
            {id: 4, name: 'Diana', age: 25, category: '前端开发', score1: 82, score2: 91, score3: 84},
            {id: 5, name: 'Eric', age: 21, category: '产品设计', score1: 76, score2: 80, score3: 79},
            {id: 6, name: 'Fiona', age: 22, category: '数据分析', score1: 85, score2: 88, score3: 86},
            {id: 7, name: 'George', age: 24, category: '前端开发', score1: 93, score2: 90, score3: 91},
            {id: 8, name: 'Helen', age: 23, category: '产品设计', score1: 72, score2: 70, score3: 75},
            {id: 9, name: 'Ian', age: 25, category: '数据分析', score1: 87, score2: 85, score3: 90},
            {id: 10, name: 'Judy', age: 22, category: '前端开发', score1: 95, score2: 92, score3: 94}
        ];

        // 初始化函数（修复事件顺序）
        document.addEventListener('DOMContentLoaded', () => {
            initializeCharts();
            renderTable();
            setupEventListeners();
        });

        // 核心功能函数
        function initializeCharts() {
            createLineChart();
            createPieChart();
            create3DChart();
        }

        function setupEventListeners() {
            document.getElementById('show3D').addEventListener('change', toggle3DView);
        }

        // 表格操作
        function renderTable() {
            const tbody = document.getElementById('tableBody');
            tbody.innerHTML = data.map(item => `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.category}</td>
                    <td>${item.score1}</td>
                    <td>${item.score2}</td>
                    <td>${item.score3}</td>
                    <td class="table-actions">
                        <button class="btn btn-sm btn-info" onclick="editRow(${item.id})">编辑</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteRow(${item.id})">删除</button>
                    </td>
                </tr>
            `).join('');
        }

        // 图表创建函数
        function createLineChart() {
            const lineData = [{
                x: data.map(d => d.id),
                y: data.map(d => d.score1),
                type: 'scatter',
                mode: 'lines+markers',
                name: '得分1'
            }];
            Plotly.newPlot('lineChart', lineData, {
                title: '得分1趋势分析',
                xaxis: {title: '员工ID'},
                yaxis: {title: '得分值'}
            });
        }

        function createPieChart() {
            const categoryCounts = data.reduce((acc, curr) => {
                acc[curr.category] = (acc[curr.category] || 0) + 1;
                return acc;
            }, {});
            const pieData = [{
                labels: Object.keys(categoryCounts),
                values: Object.values(categoryCounts),
                type: 'pie',
                hole: 0.3
            }];
            Plotly.newPlot('pieChart', pieData, {
                title: '岗位分布',
                hoverinfo: 'label+percent'
            });
        }

        function create3DChart() {
            const scatter3dData = [{
                x: data.map(d => d.score1),
                y: data.map(d => d.score2),
                z: data.map(d => d.score3),
                mode: 'markers',
                marker: {
                    size: 8,
                    color: data.map(d => d.score3),
                    colorscale: 'Viridis'
                },
                type: 'scatter3d'
            }];
            Plotly.newPlot('3dChart', scatter3dData, {
                title: '三维能力评估',
                scene: {
                    xaxis: {title: '技术能力'},
                    yaxis: {title: '业务能力'},
                    zaxis: {title: '创新思维'}
                }
            });
        }

        // 交互功能
        function toggle3DView() {
            const container = document.getElementById('tab-3d');
            container.style.transform = this.checked ? 'rotateX(30deg) rotateY(30deg)' : 'none';
        }

        function addNewRow() {
            const newRow = {
                id: Date.now(),
                name: '',
                age: '',
                category: '产品设计',
                score1: '',
                score2: '',
                score3: ''
            };
            data.push(newRow);
            renderTable();
            localStorage.setItem('data', JSON.stringify(data));
        }

        function editRow(id) {
            const item = data.find(x => x.id === id);
            document.getElementById('editId').value = item.id;
            document.getElementById('editName').value = item.name;
            document.getElementById('editAge').value = item.age;
            document.getElementById('editCategory').value = item.category;
            document.getElementById('editScore1').value = item.score1;
            document.getElementById('editScore2').value = item.score2;
            document.getElementById('editScore3').value = item.score3;
            const modal = new bootstrap.Modal(document.getElementById('editModal'));
            modal.show();
        }

        function saveEdit() {
            const id = parseInt(document.getElementById('editId').value);
            const index = data.findIndex(x => x.id === id);
            if (index !== -1) {
                data[index] = {
                    id: id,
                    name: document.getElementById('editName').value,
                    age: parseInt(document.getElementById('editAge').value),
                    category: document.getElementById('editCategory').value,
                    score1: parseFloat(document.getElementById('editScore1').value),
                    score2: parseFloat(document.getElementById('editScore2').value),
                    score3: parseFloat(document.getElementById('editScore3').value)
                };
                localStorage.setItem('data', JSON.stringify(data));
                renderTable();
                const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
                modal.hide();
            }
        }

        function deleteRow(id) {
            if (confirm('确认删除此数据？')) {
                data = data.filter(x => x.id !== id);
                localStorage.setItem('data', JSON.stringify(data));
                renderTable();
            }
        }

        // 导出功能
        function exportToCSV() {
            const headers = ['ID,姓名,年龄,分类,得分1,得分2,得分3\n'];
            const rows = data.map(item => 
                `${item.id},${item.name},${item.age},${item.category},${item.score1},${item.score2},${item.score3}\n`
            );
            const csv = headers.concat(rows).join('');
            const blob = new Blob([csv], {type: 'text/csv'});
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'employee_data.csv';
            a.click();
        }
    </script>
</body>
</html>
